<template>
    <div class="lyric">
        <ul class="geci">
            <li>歌词第一行</li>
            <li>歌词第2行</li>
            <li>歌词第3行</li>
            <li>歌词第4行</li>
            <li>歌词第5行</li>
        </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
        lyricHeight:X.height()
    };
  },
  created() {
    $('.geci').animate({'top':'-'}+lyricHeight+'px',2000)
  },
  methods: {
  
  }
};
</script>
 <style >
    .lyric{
        width:400px;
        height: 500px;
        position: relative;
        overflow: hidden;
    }

    .lyric ul{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0;
        padding: 0;
    }

    
 </style>